<template>
    <div class="musicList">
        <div class="musicTop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="musicContent">
            <van-swipe
                :loop="false"
                :width="150"
                class="my-swipe"
                :show-indicators="false"
            >
                <van-swipe-item v-for="item in state.musicList" :key="item">
                    <router-link
                        :to="{ path: '/itemMusic', query: { id: item.id } }"
                    >
                        <img :src="item.picUrl" alt="" />
                        <span class="playCount">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gl-play-copy"></use>
                            </svg>
                            <span>{{ changeCount(item.playCount) }}</span>
                        </span>
                        <span class="name">{{ item.name }}</span></router-link
                    >
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script>
import { onMounted, reactive } from "vue";
import { getMusicList } from "../request/api/home";
export default {
    // data() {
    //     return {
    //         musicList: [],
    //     };
    // },
    // methods: {
    //     async getGedan() {
    //         let res = await getMusicList();
    //         console.log(res);
    //         this.musicList = res.data.result;
    //     },
    //     changeCount(num) {
    //         if (num >= 100000000) {
    //             return (num / 100000000).toFixed(1) + "亿";
    //         } else if (num >= 1000) {
    //             return (num / 10000).toFixed(1) + "万";
    //         }
    //     },
    // },
    // mounted() {
    //     this.getGedan();
    // },
    setup() {
        const state = reactive({
            musicList: [],
        });
        function changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + "亿";
            } else if (num >= 1000) {
                return (num / 10000).toFixed(1) + "万";
            }
        }
        onMounted(async () => {
            let res = await getMusicList();
            console.log(res);
            state.musicList = res.data.result;
        });
        return {
            state,
            changeCount,
        };
    },
};
</script>
<style lang="less" scoped>
.musicList {
    width: 100%;
    height: 5rem;
    padding: 0.2rem;
    .musicTop {
        width: 100%;
        height: 0.6rem;
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.2rem;
        .title {
            font-size: 0.4rem;
            font-weight: 900;
        }
        .more {
            border: 1px solid #ccc;
            text-align: center;
            line-height: 0.6rem;
            padding: 0 0.2rem;
            border-radius: 0.4rem;
        }
    }
    .musicContent {
        width: 100%;
        height: 4rem;
        .my-swipe {
            height: 100%;
            position: relative;
            img {
                width: 100%;
                height: 2.5rem;
            }
            .playCount {
                // width: 20px;
                // height: 20px;
                position: absolute;
                top: 0;
                left: 65px;
                .icon {
                    position: relative;
                    width: 15px;
                    height: 15px;
                    top: 0.1rem;
                    fill: #fff;
                }
                span {
                    position: absolute;
                    top: 0.1rem;
                    color: white;
                }
            }
        }
    }
}
</style>